<template>
  <view class="pm-project-bg"></view>
  <view class="pm-project app-container flex flex-column">
    <view class="pm-project-title flex-shrink-0">华信项目管理系统</view>
    <view class="pm-project-search flex-shrink-0">
      <d-input v-model="queryParams.projectName" placeholder="请输入要搜索的项目名称">
        <template #prefix>
          <image class="icon-search" :src="SearchPng"></image>
        </template>
        <template #suffix>
          <view @click="handleSelect">
            <text class="search-split">|</text>
            <text class="search-text">搜索</text>
          </view>
        </template>
      </d-input>
    </view>
    <view class="flex-grow-1 pm-project__main">
      <view class="pm-project__body">
        <d-card>
          <view style="height: 100%;" class="flex flex-column">
            <view class="op-card-title flex-shrink-0">项目列表({{ queryParams.pageNo || 0 }})</view>
            <view class="flex-grow-1">
              <swiper class="swiper-box">
                <swiper-item>
                  <virtual-table
                    ref="vTableRef"
                    :handler-get-list="getBpmNum"
                    v-model:page-no="queryParams.pageNo"
                    v-model:page-data="pageData"
                    :total="queryParams.total"
                    :page-size="queryParams.pageSize"
                  >
                    <view v-for="(page, key) in pageData" :key="page.pageNo">
                      <view @click="gotoBasicInfo(item.id)" class="pm-proj-item" v-for="(item, key) in page.list" :key="'pm-proj-item_' + key">
                        <view class="project-name">{{ item.projectName }}</view>
                        <view class="project-view flex flex-row justify-between align-center">
                          <view class="project-number">项目编号：{{ item.projectNumber || '暂无' }}</view>
                          <view class="goto-icon flex flex-row justify-center align-center flex-shrink-0">
                            <uni-icons color="#fff" type="right" size="15"></uni-icons>
                          </view>
                        </view>
                      </view>
                    </view>
                  </virtual-table>
                </swiper-item>
              </swiper>
            </view>
          </view>
        </d-card>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {usePmProjectApi} from "@/api/pm/project/project";
import {RouteNameEnum} from "@/utils/pm/pmRoute";
import SearchPng from '@/static/images/oa/search.svg'

defineOptions({ name: 'PmHomeProposed' })

function getBpmNum() {
  return new Promise((resolve, reject) => {
    usePmProjectApi().getItemInformationPage(queryParams).then((res: any) => {
      if (res.code === 0 && res.data) {
        queryParams.total = res.data.total;
        resolve(res.data.list);
      } else {
        reject(res.data)
      }
    }).catch((err) => {
      reject(err);
    })
  })
}

const vTableRef = ref();
function handleSelect() {
  queryParams.pageNo = 1;
  if (vTableRef.value) {
    vTableRef.value.getData();
  }
}

function gotoBasicInfo(id: string) {
  usePmProjectApi().getProjectNumber(id).then(res => {
    if (res.code === 0 && res.data) {
      uni.navigateTo({
        url: `/pmPages/project/detail/index?` +
          `component_name=${RouteNameEnum.projectBasicInfo}&` +
          `project_number=${res.data}`
      })
    }
  })
}

const pageData = ref<Array<VirtualTableData>>([]);
const queryParams = reactive<{
  pageSize: number,
  pageNo: number,
  total: number,
  projectName: string,
}>({
  pageSize: 10,
  pageNo: 1,
  total: 0,
  projectName: null,
})

</script>

<style scoped lang="scss">
@import 'src/styles/bg/proposedBg';

.pm-project-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: $--oa-proposed-bg;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
}

:deep(.uni-input-placeholder.input-placeholder) {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.5);
}

:deep(.uni-input-input) {
  color: #fff;
  font-size: 32rpx;
}

.pm-project {
  position: relative;
  z-index: 9;

  .pm-project__main {
    margin-top: 40rpx;

    .pm-project__body {
      height: 100%;

      .swiper-box {
        .pm-proj-item {
          border-bottom: 1px solid #D8D8D8;
          padding: 30rpx 0 20rpx 0;

          .project-name {
            margin-bottom: 30rpx;
            color: #333333;
            font-size: 28rpx;
            letter-spacing: 0em;
          }

          .project-view {
            .project-number {
              color: #333333;
              font-size: 26rpx;
            }

            .goto-icon {
              background-color: #3F7DF8;
              width: 48rpx;
              height: 48rpx;
              border-radius: 50%;
              box-shadow: 0 2px 4px rgba(63, 125, 248, 0.3);
            }
          }
        }
      }
    }

    .op-card-title {
      margin-bottom: 20rpx;
      font-size: 36rpx;
      font-weight: bold;
      line-height: normal;
      letter-spacing: 0em;
      color: #333333;
    }
  }

  .pm-project-title {
    //margin-top: 40rpx;
    font-size: 44rpx;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0em;
    color: #FFFFFF;
    text-align: center;
  }

  .pm-project-search {
    max-width: 568rpx;
    margin: 44rpx auto 0;

    .icon-search {
      width: 48rpx;
      height: 48rpx;
      margin-right: 18rpx;
    }

    .search-split {
      margin: 0 24rpx;
      color: rgba(255, 255, 255, 0.2);
    }

    .search-text {
      font-size: 32rpx;
      color: #FFFFFF;
    }
  }
}
</style>
